<template>
  <div class="main">
    <el-menu
      width="260"
      id="elMeun"
      :default-active="$route.path === '/' ? '/dashboard/console' : $route.path"
      unique-opened
      router
      class="el-menu-vertical-demo"
      :collapse-transition="false"
      :collapse="isCollapse"
      @open="handleOpen"
    >
      <template #default>
        <div class="logo">
          <el-icon><location /></el-icon>
          <span v-show="!isCollapse">个人后台管理系统</span>
        </div>
        <!-- 菜单组件 -->
        <MyMenuItem v-for="item in menu" :menu="item" />
      </template>
    </el-menu>
  </div>
</template>
<script>
import MyMenuItem from "./MyMenuItem.vue";
import eventBus from "../utils/eventBus";
import { mapState } from "vuex";
eventBus.on("changeColor", (payload) => {
  if (payload) {
    elMeun.classList.add("changeColor");
    elMeun.classList.remove("changeColor-day");
  } else {
    elMeun.classList.add("changeColor-day");
    elMeun.classList.remove("changeColor");
  }
});
export default {
  components: {
    MyMenuItem,
  },
  data: () => {
    return {
      //面包屑
      Breadcrumb: [],
    };
  },
  props: ["isCollapse"],
  computed: {
    ...mapState("user", ["menu"]),
  },
  mounted() {
    this.handleOpen();
    this.changeBreadcrumb();
  },
  watch: {
    $route: {
      handler(newValue) {
        this.Breadcrumb[1] = newValue.meta?.label;
      },
      immediate: true,
    },
  },
  methods: {
    //点击菜单项标题触发
    handleOpen(index) {
      this.Breadcrumb[0] = index;
    },
    //改变面包屑
    changeBreadcrumb() {
      eventBus.emit("getBreadcrumb", this.Breadcrumb);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu-vertical-demo {
  height: 100vh;
  overflow-y: auto;
  background-color: $all_bgcolor_day;
}
.logo {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
  span {
    margin-left: 10px;
  }
}
// .changeColor {
//   color: $all_color_night;
//   background-color: $all_bgcolor_night;
// }

// .changeColor-day {
//   color: $all_color_day;
//   background-color: $all_bgcolor_day;
// }
</style>
